<template>
	<view class="big_wrapper">
		<view class="bg">
		</view>
		<view class="top">
			<view class="left">
				<image src="../../../../static/image/juxing3.png" mode=""></image>
				<view class="order_sn">
					{{packageList.order_sn}}
				</view>
			</view>
			<view class="right">
				共有{{packageList.package.length}}个包裹
			</view>
		</view>
		<view class="wrapper">
			<view class="item_wrapper" v-for="(item,index) in packageList.package" :key="item.id">
				<view class="display">
					<view class="title">
						包裹信息{{index+1}}
						<view class="yellow">
						</view>
					</view>
				</view>
				<view class="item">
					<view class="label">
						物品名称
					</view>
					<view class="data">
						{{item.name}}
					</view>
				</view>
				<view class="item">
					<view class="label">
						物品价值
					</view>
					<view class="data red">
						￥{{item.price}}
					</view>
				</view>
				<view class="item">
					<view class="label">
						商品类型
					</view>
					<view class="data">
						{{item.goodstype}}
					</view>
				</view>
				<view class="item">
					<view class="label">
						商品数量
					</view>
					<view class="data">
						{{item.num}}
					</view>
				</view>
				<view class="item">
					<view class="label">
						商品备注
					</view>
					<view class="data">
						{{item.remark}}
					</view>
				</view>
				<view class="item">
					<view class="label">
						快递公司
					</view>
					<view class="data">
						{{item.express}}
					</view>
				</view>
				<view class="item borderB">
					<view class="label">
						快递单号
					</view>
					<view class="data">
						{{item.express_sn}}
					</view>
				</view>
		</view>
		<view class="item_wrapper">
			<view class="item">
				<view class="label">
					寄往国家
				</view>
				<view class="data">
					迪拜
				</view>
			</view>
			<view class="item borderB">
				<view class="label">
					寄往仓库
				</view>
				<view class="data">
					默认仓库(广州)
				</view>
			</view>
		</view>
		<view class="item_wrapper">
			<view class="display">
				<view class="title">
					查验
					<view class="yellow">
					</view>
				</view>
			</view>
			<view class="imageDisplay">
				<image :src="item2" mode="" v-for="(item2,index2) in packageList.chayan" :key="index2"></image>
			</view>
		</view>
		<view class="item_wrapper">
			<view class="display">
				<view class="title">
					新单号
					<view class="yellow">
					</view>
					<view class="new_order">
						{{packageList.new_order_sn}}
					</view>
				</view>
			</view>
			<view class="imageDisplay">
				<image :src="item3" mode="" v-for="(item3,index3) in packageList.new_package_img" :key="index3"></image>
			</view>
		</view>
		<view class="item_wrapper">
			<view class="display">
				<view class="title">
					其他信息
					<view class="yellow">
					</view>
				</view>
			</view>
			<view class="item">
				<view class="label">
					体积
				</view>
				<view class="data">
					长{{packageList.new_package_info.length}}cm,宽{{packageList.new_package_info.width}}cm,高{{packageList.new_package_info.height}}cm
				</view>
			</view>
			<view class="item">
				<view class="label">
					重量
				</view>
				<view class="data">
					{{packageList.new_package_info.weigh}}
				</view>
			</view>
			<view class="item">
				<view class="label">
					运输方式
				</view>
				<view class="data">
					{{packageList.ys_type}}
				</view>
			</view>
			<view class="item">
				<view class="label">
					价格
				</view>
				<view class="data red">
					￥{{packageList.price}}
				</view>
			</view>
			<view class="item borderB">
				<view class="label">
					支付时间
				</view>
				<view class="data">
					{{packageList.pay_time}}
				</view>
			</view>
		</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				packageList:[]
			}
		},
		async onLoad(option) {
			let {id}=option;
			this.packageList=await this.getPackageList(id)
			this.packageList.new_package_img=this.packageList.new_package_img.split(",")
			console.log(this.packageList)
		},
		methods: {
			async getPackageList(id){
				let token=uni.getStorageSync("token");
				const {data}=await this.$http({
					url:"member/orderinfo?order_id="+id,
					header:{
						token
					},
				})
				console.log(data.data)
				return data.data
			}
		}
	}
</script>

<style scoped>
.bg{
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background-color: #f1f1f1;
	z-index: -1;
}
.big_wrapper{
	padding: 30rpx;
}

.marginT{
	margin-top: 30rpx;
}
.title{
	position: relative;
	font-size: 26rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #333333;
}
.new_order{
	position: absolute;
	right: 0;
	top: 0;
}

.display{
	height: 80rpx;
	line-height: 80rpx;
	border-bottom: 1rpx solid rgba(0,0,0,0.1);
}
.yellow{
	position: absolute;
	width: 6rpx;
	height: 26rpx;
	background: #F7CC46;
	border-radius: 3rpx;
	left: -2%;
	top: 32%;
}
.top .left{
	display: flex;
	align-items: center;
}
.top{
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 80rpx;;
	padding: 0 30rpx;
	background-color: #FFFFFF;
}
.top .left image{
	height: 27rpx;
	width: 23rpx;
}
.order_sn{
	margin-left: 20rpx;
	font-size: 26rpx;
	font-family: PingFang SC;
	font-weight: 600;
	color: #333333;
}
.top .right{
	font-size: 26rpx;
	font-family: PingFang SC;
	font-weight: 600;
	color: #333333;
}
.item_wrapper{
	background-color: #FFFFFF;
	padding: 0 40rpx;
	margin-top: 20rpx;
	border-radius: 10rpx;
}
.item{
	height: 70rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1rpx solid rgba(0,0,0,0.1);
}
.label{
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #666666;
}
.data{
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #333333;
}
.borderB{
	border-bottom:none ;
}
.red{
	font-weight: 500;
	color: #CA2929;
}
.imageDisplay{
	display: flex;
	flex-wrap: wrap;
	padding: 20rpx 0;
}
.imageDisplay image{
	margin-left: 10rpx;
	width: 190rpx;
	height: 160rpx;
	border-radius: 10rpx;
}
</style>
